// 上传照片组件
<template>
  <div class="up-load-image">
    <div class="up-load-image-header" v-if="Object.keys(useOption).length != 0">
      <div class="header-item">
        <div class="lable">幅名：</div>
        <el-select v-model="frame" placeholder="请选择">
          <el-option v-for="item in frameOption(useOption)" :key="item.value" :label="item.lable" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="header-item">
        <div class="lable">层数：</div>
        <el-select v-model="layers" placeholder="请选择">
          <el-option v-for="item in layersOption(useOption)" :key="item.value" :label="item.lable" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="header-item">
        <div class="lable">位置：</div>
        <el-input v-model="position" placeholder="请输入位置"></el-input>
      </div>
    </div>
    <el-empty v-else description="请选择您的参数"></el-empty>

    <!-- 上传组件 1-5-->
    <div class="upload-components" v-if="Object.keys(useOption).length != 0">
      <!-- 上传组件 1 -->
      <div class="upload-item" v-for="index in useOption.pieces" :key="index">
        <div class="upload-title">{{ useOption.piecesMap[`${index}`] }}</div>
        <el-upload
          class="upload"
          :ref="`uploadFile${index}`"
          action
          :auto-upload="false"
          multiple
          accept=".jpg,.jpeg,.png,.bmp"
          :limit="9999999"
          :show-file-list="false"
          :http-request="httpRequestUploadFile"
          :on-change="uploadFile"
        >
          <img
            v-if="imageList[`imagePath${index}`]"
            :src="imageList[`imagePath${index}`]"
            class="avatar"
            @click="enterIndex = index"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon" @click="enterIndex = index"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import API from '@/api/index'

export default {
  props: {
    useOption: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  computed: {
    layersOption() {
      return function(option) {
        if (Object.keys(option).length != 0) {
          const layer = []
          for (let i = 1; i <= option.layers; i++) {
            layer.push({
              lable: i,
              value: i
            })
          }
          return layer
        } else {
          return []
        }
      }
    },
    frameOption() {
      return function(option) {
        if (Object.keys(option).length != 0) {
          const frame = []
          for (let i = 1; i <= option.sides; i++) {
            frame.push({
              lable: option.sidesMap[`${i}`],
              value: i
            })
          }
          return frame
        } else {
          return []
        }
      }
    }
  },
  watch: {
    useOption() {
      this.frame = ''
      this.layers = ''
      this.position = ''
      this.imageList = {}
      this.imageRelativePath = {}
    }
  },
  data() {
    return {
      // 图片本地地址
      imageList: {},
      // 幅名
      frame: '',
      // 层数
      layers: '',
      // 位置
      position: '',
      // 图片相对地址
      imageRelativePath: {},
      // 进入的下标
      enterIndex: 0
    }
  },
  methods: {
    async uploadFile(param) {
      let URL
      const reader = new FileReader()

      reader.readAsDataURL(param.raw)

      const _this = this

      reader.onload = await function() {
        // 文件读取完成后
        // 读取完成后，将结果赋值给img的src
        URL = reader.result

        _this.httpRequestUploadFile(param, URL)
      }
    },

    // 正式上传的钩子
    async httpRequestUploadFile(param, URL) {
      const params = new FormData()
      params.append('multipartFile', param.raw)
      params.append('pieceNo', this.enterIndex)
      params.append('pieceName', this.useOption.piecesMap[`${this.enterIndex}`])
      this.$loadingState(true, '正在分析数据')
      const res = await this.$http.post(API.projectApi.upload, params)
      this.$loadingState(false)
      if (res.success != true) {
        return this.$message.error(res.msg || '网络错误')
      }
      this.$message.success(res.msg || '上传成功！')

      this.imageList[`imagePath${this.enterIndex}`] = URL

      // this.imageList[`imagePath${this.enterIndex}`] = res.data.picUrl
      this.imageRelativePath[`photoVos${this.enterIndex}`] = res.data
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
.up-load-image {
  box-sizing: border-box;
  .up-load-image-header {
    display: flex;
    .header-item {
      display: flex;
      align-items: center;
      margin: 0 10px;
      .lable {
        width: 50px;
      }
      .el-input,
      .el-input__inner {
        width: 120px;
        padding-left: 0px;
        padding-right: 0;
      }
      .el-input__inner {
        padding-left: 5px;
      }
      .el-input__prefix {
        display: none;
      }

      &:nth-child(1) {
        margin-left: 0;
      }
    }
  }

  .upload-components {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
    .upload-item {
      margin: 0 0.3vw;
      position: relative;
      .el-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
      }
      .upload-title {
        border: 1px solid #8c939d;
        border-radius: 1px;
        text-align: center;
        padding: 3px 0;
      }
      .upload {
        .el-upload {
          width: 32vw;
          min-width: 400px;
          min-height: calc(400px * 48 / 64);
          height: calc(32vw * 48 / 64);
          border: 1px dashed #9a9ea5;
          border-top: transparent;
          border-radius: 6px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          cursor: pointer;
          position: relative;
          overflow: hidden;

          &:hover {
            border-color: #409eff;
          }
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: calc(100% - 20px);
          height: calc(100% - 20px);
          line-height: calc(32vw * 48 / 64 - 20px);
          text-align: center;
        }
        .avatar {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}
</style>
